<template>
  <!-- 主页页面 -->
  <div class="home">
    <van-tabbar :route="true">
      <van-tabbar-item
        v-for="item in navBotton"
        :key="item.id"
        :icon="item.icon"
        replace
        :to="item.goto"
        >{{ item.name }}</van-tabbar-item
      >
    </van-tabbar>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'home',
  components: {},
  data () {
    return {
      navBotton: [
        {
          id: 0,
          name: '精选',
          icon: 'home-o',
          goto: '/index'
        },
        {
          id: 1,
          name: '分类',
          icon: 'apps-o',
          goto: '/classify'
        },
        {
          id: 2,
          name: '购物车',
          icon: 'shopping-cart-o',
          goto: '/car'
        },
        {
          id: 3,
          name: '我的',
          icon: 'friends-o',
          goto: '/me'
        }
      ]
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {},
  methods: {}
}
</script>

<style lang="scss" scoped>
h1 {
  font-size: 40px;
}
</style>
